<template>
	<view class="">
		<view class="s-input-wrap" style="margin:0">
			<view class="s-input-box flex-row">
				<text class="black-text">托盘号</text>
				<input :focus="focusState"  v-model="form.trayNo" @confirm="checkTrayNo" class="s-input flex1" placeholder="扫描 / 输入托盘号" />
				<image v-if="form.trayNo" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearTrayNo"></image>
				<image class="s-input-icon" src="/static/images/scan.png"></image>
			</view>
			<view class="s-input-box flex-row">
				<text class="black-text">料架号</text>
				<input v-model="form.shelfNo"  @confirm="checkShelfNo" class="s-input flex1" placeholder="扫描 / 输入料架号" />
				<image v-if="form.shelfNo" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearField('shelfNo')"></image>
				<image class="s-input-icon" src="/static/images/scan.png"></image>
			</view>
			<view class="s-input-box flex-row">
				<text class="black-text">库位号</text>
				<input v-model="form.binNo" class="s-input flex1" placeholder="扫描 / 输入库位号" />
				<image v-if="form.binNo" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearField('binNo')"></image>
				<image class="s-input-icon" src="/static/images/scan.png"></image>
			</view>

			<view class="s-input-box flex-row-between">
				<text class="black-text font-30">采购入库单号</text>
				<text class="black-text font-30">{{form.billNo || '---'}}</text>
			</view>

			<!-- Materials list -->
			<scroll-view scroll-y class="materials-list list-card-wrap" style="margin: 0" v-if="materials.length">
				<view class="material-card list-card" v-for="(item, index) in materials" :key="index">
					<view class="material-content">
						<view class="material-row">
							<text class="label">SKU编号：</text>
							<text class="label">{{ item.productNo }}</text>
						</view>
						<view class="material-row">
							<text class="label" style="width: 180rpx">物料名称：</text>
							<text class="label">{{ item.productName }}</text>
						</view>
						<view class="material-row">
							<text class="label">数量：</text>
							<text class="label">{{ item.qty }}</text>
						</view>
						<view class="material-row">
							<text class="label">单位：</text>
							<text class="label">{{ item.productUnit }}</text>
						</view>
						<view class="material-row">
							<text class="label">批次：</text>
							<text class="label">{{ item.batchNo }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="nodata-label" v-else>
				<text class="label">暂无托盘信息</text>
			</view>
		</view>
		<view class="content-list-total flex-row-between">
			<button @click="submit" class="botton p-botton botton-big">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		validateTrayCode,
		validateShelvesCode
	} from "@/utils/common"
	import {
		bind,
		getBillProductList,
		getTray
	} from "./api"

	export default {
		data() {
			return {
				focusState: true,
				form: {
					shelfNo: '',
					trayNo: '',
					binNo: '',
					billNo: ''
				},
				materials: []
			}
		},
		methods: {
			// Form field handling
			clearField(fieldName) {
				if (fieldName in this.form) {
					this.$set(this.form, fieldName, '')
				}
			},

			clearTrayNo() {
				this.clearField('trayNo')
				this.materials = []
			},

			resetForm() {
				Object.keys(this.form).forEach(key => {
					this.$set(this.form, key, '')
				})
				this.materials = []
			},

			// Validation methods
			validateForm() {
				const validations = {
					binNo: '请输入库位号',
					shelfNo: '请输入料架号',
					trayNo: '请输入托盘号'
				}

				for (const [field, message] of Object.entries(validations)) {
					if (!this.form[field]) {
						this.$modal.msg(message)
						return false
					}
				}
				return true
			},
			checkShelfNo(){
				if (!validateShelvesCode(this.form.shelfNo)) {
					this.form.shelfNo = ''
					this.$modal.msg("料架号格式不正确");
				}
			},

			// API handling methods
			async checkTrayNo() {
				if (!validateTrayCode(this.form.trayNo)) {
					this.form.trayNo = ''
					this.$modal.msg("托盘号格式不正确");
					return;
				}

				try {
					const res = await getTray({ trayNo: this.form.trayNo })
					
					if (res.code !== 200) {
						this.$modal.confirmClose(res.msg || '获取托盘信息失败')
						this.$set(this.form, 'billNo', '')
						return
					}

					if (!res.rows.length) {
						this.$modal.msg('此托盘未绑定物料')
						this.$set(this.form, 'billNo', '')
						return
					}

					const tray = res.rows[0]
					if (!tray.erpInBillNo) {
						this.$modal.msg('此托盘不存在关联订单')
						return
					}

					this.$set(this.form, 'billNo', tray.erpInBillNo)
					await this.getTrayProductList({
						billNo: tray.erpInBillNo,
						trayNo: tray.trayNo
					})
				} catch (error) {
					this.$modal.confirmClose(error.msg || '获取托盘信息失败')
					this.$set(this.form, 'billNo', '')
				}
			},

			async getTrayProductList(params) {
				try {
					const res = await getBillProductList(params)
					
					if (res.code !== 200) {
						this.$modal.confirmClose(res.msg || '获取物料列表失败')
						return
					}

					if (!res.rows.length) {
						this.$modal.msg('此托盘未绑定物料')
						this.$set(this.form, 'billNo', '')
						return
					}

					this.$set(this.form, 'billNo', res.rows[0].billNo)
					this.materials = res.rows
				} catch (error) {
					this.$modal.confirmClose(error.msg || '获取物料列表失败')
				}
			},

			async submit() {
				if (!this.validateForm()) return

				try {
					await this.$modal.confirm('是否确认上架')
					this.$modal.loading("上架中...")

					const data = {
						binNo: this.form.binNo,
						shelfNo: this.form.shelfNo,
						trayNo: this.form.trayNo,
						billType: 4  // 调拨入库类型
					}

					const res = await bind(data)
					this.$modal.closeLoading()

					if (res.code === 200) {
						this.$modal.msgSuccess("上架成功")
						this.resetForm()
					} else {
						this.$modal.confirmClose(res.msg || '上架失败')
						this.resetForm()
					}
				} catch (error) {
					this.$modal.closeLoading()
					this.$modal.confirmClose(error.msg || '上架失败')
					this.resetForm()
				} finally{
					this.focusState = false
					setTimeout(()=>{
						this.$nextTick(() => {
							this.focusState = true
						})
					},500)
				}
			}
		}
	}
</script>

<style>
	.materials-list {
		/* padding: 20rpx; */
		max-height: calc(100vh - 580rpx);
		background-color: #F8F9FA;
		overflow: hidden;
		padding: 10rpx;
		
		.material-card {
			/* background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); */
			overflow: hidden;
			transition: all 0.3s ease;
			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
			}

			.material-header {
				/* padding: 24rpx 32rpx; */
				padding: 20rpx;
				margin-bottom: 10rpx;
				background-color: #F8F9FA;
				font-size: 30rpx;
				color: #333;
				font-weight: 600;
				border-bottom: 2rpx solid #E5E6EB;
				display: flex;
				align-items: center;

				&::before {
					content: '';
					display: inline-block;
					width: 6rpx;
					height: 30rpx;
					background-color: #4599ad;
					margin-right: 16rpx;
					border-radius: 3rpx;
				}
			}

			.material-content {
				padding: 32rpx;
			}

			.material-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				line-height: 1.5;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					color: #666;
					font-weight: 500;
				}

				.value {
					color: #333;
					font-weight: 600;
					text-align: right;
					max-width: 60%;
					word-break: break-all;
				}
			}
		}
	}

	.nodata-label {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;

		.label {
			color: #999;
			font-size: 28rpx;
		}
	}
	.clear-icon {
		margin-left: 10rpx;
		width: 50rpx!important;
		height:50rpx!important;
	}
</style>
